<!--
 * @Author: 赖钊亮
 * @Description: 我的积分界面
 * @Date: 2020-07-01 14:55:38
 * @LastEditTime: 2020-07-02 16:41:52
 * @LastEditors: Please set LastEditors
 * @FilePath: \mobile_item_121e:\新建文件夹\jkshopping\src\pages\my\components\integral.vue
--> 
<template>
  <div>
    <!--我的积分顶部 -->
    <van-nav-bar title="我的积分" left-text="返回" left-arrow @click-left="goBack" />
  <!-- 我的积分 -->
    <div class="integral">
      <div class="integral-color">
        <div class="integral-text">
          <van-row>
            <van-col span="24" class="title">{{this.integralNum.integral}}</van-col>
            <van-col span="24">我的积分</van-col>
            <van-col span="5" class="obtain" @click="obtain">
              <van-icon name="fail" />如何获取
            </van-col>
          </van-row>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as api from "@/api/apiList/user/login/login.js";
import * as Api from "@/api/apiList/user/user.js"
export default {
  data() {
    return {
      integralNum: "",//积分数
      integralRule:""//积分规则
    };
  },
  methods: {
    // 返回上一页
    goBack() {
      this.$router.go(-1);
    },
    // 登录接口
    async API_login() {
      let data = {
        mobile: 18820034114,
        password: 123123
      };
      return await api.login(this.qs.stringify(data));
    },
    // 获取积分规则信息
    async API_integralRule(){
      return await Api.integralRule()
    },
    // 获取积分数量
    async API_userIntegral(){
      return await Api.userIntegral()
    },
    obtain(){
     this.$dialog({
       message:this.integralRule
     }) 
    }
  },
  // 登录接口获取积分信息
  async created() {
    let res = await this.API_userIntegral();
    if (res.data.code === 200) {
      this.integralNum = res.data.data;    
    }
    let res1 = await this.API_integralRule();
    this.integralRule = res1.data.data.rules.content
  }
};
</script>

<style lang="scss" scoped>
//顶部
.van-nav-bar {
  background-color: #f4b044;
}
//标题
/deep/ .van-nav-bar__title {
  color: white;
}
//返回
/deep/ .van-nav-bar__text {
  color: white;
}
//箭头
/deep/ .van-nav-bar .van-icon {
  color: white;
}
//积分界面
.integral {
  display: block;
  .integral-color {
    width: 100%;
    height: 200px;
    background-color: #f4b044;
    .integral-text {
      .van-row {
        text-align: center;
        color: white;
        .title {
          margin-top: 50px;
          line-height: 50px;
          font-size: 20px;
          font-weight: bold;
        }
        .obtain {
          margin-top: 40px;
          margin-left: 270px;
          background: #d0963a;
          height: 20px;
          text-align: center;
          .van-icon{
            font-size: 15px;
          }
        }
      }
    }
  }
}
</style>